<template>
    <div>
        <!-- 系统 Logo -->
        <el-aside class="header-logo" :width="asideWidth">
            <div @click="$router.push({ name: 'Home' })">
                <a v-if="foldAside">后台管理中心</a>
                <a v-else>后台</a>
            </div>
        </el-aside>
        <el-aside class="aside" :width="asideWidth" :class='"icon-size-" + iconSize'>
            <el-scrollbar style="height: 100%; width: 100%;">
                <el-menu :default-active="menuActiveName || 'HomePage'" :collapse="!foldAside" :collapseTransition="false"
                 background-color="#263238" text-color="#8a979e">
                    <!-- 首页菜单项 - 所有角色都可见 -->
                    <el-menu-item index="HomePage" @click="$router.push({ name: 'Home' })">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>

                    <!-- 用人单位菜单 -->
                    <template v-if="$store.state.user.user && $store.state.user.user.role === 1">
                        <el-menu-item index="EmployerProfile" @click="$router.push({ name: 'EmployerProfile' })">
                            <i class="el-icon-office-building"></i>
                            <span slot="title">企业信息</span>
                        </el-menu-item>
                        <el-menu-item index="JobManagement" @click="$router.push({ name: 'JobManagement' })">
                            <i class="el-icon-suitcase"></i>
                            <span slot="title">职位管理</span>
                        </el-menu-item>
                        <el-menu-item index="ApplicationList" @click="$router.push({ name: 'ApplicationList' })">
                            <i class="el-icon-document"></i>
                            <span slot="title">申请管理</span>
                        </el-menu-item>
                    </template>

                    <!-- 管理员菜单 -->
                    <template v-if="$store.state.user.user && $store.state.user.user.role === 0">
                        <el-menu-item index="UserList" @click="$router.push({ name: 'UserList' })">
                            <i class="el-icon-user-solid"></i>
                            <span slot="title">用户管理</span>
                        </el-menu-item>
                        <el-menu-item index="AdminJobList" @click="$router.push({ name: 'AdminJobList' })">
                            <i class="el-icon-suitcase"></i>
                            <span slot="title">职位管理</span>
                        </el-menu-item>
                        <el-menu-item index="AdminApplicationList" @click="$router.push({ name: 'AdminApplicationList' })">
                            <i class="el-icon-document"></i>
                            <span slot="title">申请管理</span>
                        </el-menu-item>
                        <el-menu-item index="FeeManagement" @click="$router.push({ name: 'FeeManagement' })">
                            <i class="el-icon-money"></i>
                            <span slot="title">费用管理</span>
                        </el-menu-item>
                        <el-menu-item index="EmploymentList" @click="$router.push({ name: 'EmploymentList' })">
                            <i class="el-icon-user"></i>
                            <span slot="title">就业人员</span>
                        </el-menu-item>
                        <el-menu-item index="CategoryManagement" @click="$router.push({ name: 'CategoryManagement' })">
                            <i class="el-icon-collection-tag"></i>
                            <span slot="title">职位类别</span>
                        </el-menu-item>
                    </template>

                    <!-- 求职者菜单 -->
                    <template v-if="$store.state.user.user && $store.state.user.user.role === 2">
                        <el-menu-item index="SeekerProfile" @click="$router.push({ name: 'SeekerProfile' })">
                            <i class="el-icon-user"></i>
                            <span slot="title">个人信息</span>
                        </el-menu-item>
                        <el-menu-item index="JobSearch" @click="$router.push({ name: 'JobSearch' })">
                            <i class="el-icon-search"></i>
                            <span slot="title">职位搜索</span>
                        </el-menu-item>
                        <el-menu-item index="MyApplications" @click="$router.push({ name: 'MyApplications' })">
                            <i class="el-icon-document-checked"></i>
                            <span slot="title">我的申请</span>
                        </el-menu-item>
                    </template>
                </el-menu>
            </el-scrollbar>
        </el-aside>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { isURL } from '@/utils/validate.js'

export default {
    name: 'Aside',
    props: ['foldAside'],
    data() {
        return {
            asideWidth: '200px',
            iconSize: 'true'
        }
    },
    computed: {
        ...mapState('common', ['menuActiveName', 'mainTabs', 'dynamicRoutes'])
    },
    methods: {
        ...mapActions('common', ['updateMenuActiveName', 'updateMainTabs', 'updateMainTabsActiveName'])
    },
    watch: {
        foldAside(val) {
            this.asideWidth = val ? '200px' : '64px'
            this.iconSize = val
        },
        $route(route) {
            this.updateMenuActiveName(route.name)
            if (route.meta.isTab) {
                let tab = this.mainTabs.filter(item => item.name === route.name)[0]
                if (!tab) {
                    tab = {
                        name: route.name,
                        params: route.params,
                        query: route.query,
                        type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
                        iframeUrl: route.meta.iframeUrl || ''
                    }
                    this.updateMainTabs(this.mainTabs.concat(tab))
                }
                this.updateMainTabsActiveName(route.name)
            }
        }
    }
}
</script>

<style>
.aside {
    margin-bottom: 0;
    height: 100%;
    max-height: calc(100% - 50px);
    width: 100%;
    max-width: 200px;
    background-color: #263238;
    text-align: left;
    right: 0;
}

.header-logo {
    background-color: #17b3a3;
    text-align: center;
    height: 50px;
    line-height: 50px;
    width: 200px;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 0;
    cursor: pointer;
}

.el-submenu .el-menu-item {
    max-width: 200px !important;
}

.el-scrollbar__wrap {
    overflow-x: hidden !important;
}

.icon-size-false i {
    font-size: 30px !important;
}

.icon-size-true i {
    font-size: 18px !important;
}
</style>
